<template>


  <section class="fx-row-center fx-row time-layer">

    <a @click="pre()"  href="javascript:void(0)" class="icon-arrow-right time-arrow">
      <i class="iconfont icon-arrow "></i>
    </a>

    <div class="fx ovh pos-rel">

      <div class="time-point text-center" style="width : 112px;">
        <span>
           {{startText}} ~ {{endText}}
        </span>
      </div>

      <div class=" time-selection" id="wrapper">
        <div id="scroller">
          <ul class="time-selection-list">
            <li v-for="(time,index) in timeArray" class="pos-rel">
              <h5 v-if="index % 6 == 0" class="time-desc">{{time.hour}}:{{time.min}}</h5>
              <div class="time-line" :class="[getLineClass(time)]"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <a @click="next()" href="javascript:void(0)" class="time-arrow">
      <i class="iconfont icon-arrow"></i>
    </a>


  </section>


</template>
<style lang="scss" scoped>

  .icon-arrow-right{
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
  }

  #scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*width: 1176px;*/
    width: 1160px;
    box-sizing: content-box;

    padding-left: 50%;
    padding-right: 50%;

    height: 54px;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }

  #wrapper {
    position: relative;
    z-index: 1;
    top: 0;
    height: 54px;
    width: 100%;
    overflow: hidden;
    background: #fff;
  }

  .time-point {
    background: #42BD55;
    border-radius: 20px;
    padding: 6.5px 0;
    position: absolute;
    color: #fff;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    margin-left: 35px;

    top: 12px;
    z-index: 3;
    font-size: 12px;
  }

  .time-layer {
    background: #fff;
  }

  .time-arrow {
    padding: 2px 5px;
    color: #42BD55;
    i {
      font-size: 18px;
      font-weight: bold;
    }

  }

  .time-selection {

    .time-selection-list {
      padding-top: 42px;
      height: inherit;

      & > li {
        display: inline-block;
        width: 8px;
        position: relative;
      }
    }

    .time-desc {

      position: absolute;
      left: -14px;
      top: -25px;
    }
    .time-line {
      width: 1px;
      height: 5px;
      background: transparent;

      &.long {
        height: 9px;
        background: #D8D8D8;
      }

      &.short {
        height: 5px;
        background: #D8D8D8;
      }
    }
  }


</style>
<script>


let startTime = 0;
let endTime  = 24;
let step = 10;
let portion = (endTime - startTime) * (60 /step);
let myScroll;
let currentDate;


import IScroll from "iscroll";

var  convertConstantly = function(sec){
          let hour  = 0;
          let min   =0;
          let hourDec;
          //整点
          if(sec % 60 == 0 ){
              hour = sec / 60;
          }
          //小数
          else{
            min = sec % 60;
            hour = parseInt(sec / 60);
          }

          if(hour  < 10){
             hour = "0"+hour;
          }
          if(min == 0) min = "0"+min;
        return  {
          hour  : hour,
          min   : min
        }
}

var  getArray = function(){
  let timeArray = [];
  for(var i=0 ;i<=portion; i++){
      let obj = convertConstantly(i * step);
      obj.index  =  i;
      timeArray.push(obj)
  }
  console.log(timeArray.length * 8);
  return timeArray;


}

    export default{

      props : {
        value : String,
        duration :  Number,
        time : String
      },

      mounted  : function(){
        console.log("mounted");

        //初始化数据
        this.timeArray = getArray();
        var _this = this;

        if(!this.time){
          //初始化当前时间
          currentDate =  new Date();
          if(currentDate.getMinutes() % 10 == 0){
              currentDate = new Date(currentDate.getTime() + 30 * 60000);
          }
          else{
             currentDate.setMinutes(parseInt(currentDate.getMinutes()  / 10) * 10);
             currentDate = new Date(currentDate.getTime() + 30 * 60000);
          }
        }
        else{
            let timeArray = this.time.split(":");
             //初始化当前时间
            currentDate =  new Date();
            currentDate.setHours(timeArray[0]);
            currentDate.setMinutes(timeArray[1]);
        }


        //绑定iscroll
        myScroll = new IScroll('#wrapper',
        {
               eventPassthrough: true,
               scrollX: true,
               scrollY: false,
               preventDefault: false
        });

        myScroll.on('scrollEnd', function () {
            let a ;
            if(this.x % 8  == 0){
               a = -(this.x / 8);
            }
            else{
                a = -parseInt(this.x / 8);
                //移动scroll
                console.log(-a*8);
                //this.scrollTo(-a*8,this.y)
            }

           if(a > portion){
               a = portion;
           }

           let obj = _this.timeArray[a];
           _this.renderTimeBar(obj);
        });


         this.goToPosition(currentDate.getHours(),currentDate.getMinutes());

      },

      beforeDestroy : function(){
          myScroll.destroy();
          myScroll = null;
      },

      methods : {
        getLineClass : function(time){
            if(time.min == "00"){
              return "long";
            }
            else if(time.min == "30"){
              return "short"
            }
            else{
              return "";
            }
        },

        renderTimeBar : function(time){
           currentDate.setHours(time.hour);
           currentDate.setMinutes(time.min);
           console.log("duration -- ",this.duration);

           var temp = new Date(currentDate.getTime() + this.duration);
           this.startText = time.hour + ":" + time.min;
           this.endText = (temp.getHours() < 10 ?  "0"+temp.getHours() : temp.getHours()) + ":" + (temp.getMinutes()  == 0 ? "00" : temp.getMinutes());

            console.log("发送通知..");
            this.emitNotify(time);

        },

        next : function(){
             currentDate = new Date(currentDate.getTime() + 10 * 60000);
             console.log(currentDate.getMinutes())
            this.goToPosition(currentDate.getHours(),currentDate.getMinutes())
        },

        pre : function(){
              currentDate = new Date(currentDate.getTime() - 10 * 60000);
               console.log(currentDate.getMinutes())
                this.goToPosition(currentDate.getHours(),currentDate.getMinutes())
        },

        refresh : function(){
          this.pre();
          this.next();
        },


        goToPosition : function(hour,min){
          let a = hour,b = min || 0;
          if( hour < 10) a = "0"+hour;
          if( min  == 0) b = "0"+min;

          //移动位置
          let timeArray = this.timeArray.filter((t)=>{
            return t.hour  == a && t.min == b;
          });

          if(timeArray.length > 0){
            let index = timeArray[0].index;
            myScroll.scrollTo(-index * 8,0);

            this.renderTimeBar(timeArray[0]);

          }
        },

        emitNotify : function(obj){
            this.$emit("timeSelectionComplete",obj);
        }

      },

      computed : {

      },

        data(){
          return {
            portion : portion,
            step : step,
            timeArray : [],
            offset : 0,
            startText : ""
          }
        },
        components:{

        }
    }


</script>
